<template>
    <div class="indexClass">
        <div class="indexContent">
            <!-- 左侧好友信息 -->
            <div style="width: 25%">
                <leftUser></leftUser>
            </div>
            <div style="width: 75%">
                <chatMain></chatMain>
            </div>
        </div>

        <!-- 弹框信息 -->
        <addFriends />

        <!-- 好友添加提示信息 -->
        <transition name="el-zoom-in-bottom">
            <addFriendTip v-show="addFriendTipVisible" :tipData="addFriendTipData" />
        </transition>

    </div>
</template>

<script>
    import * as $Constants from '../api/Constants'
    // 组件信息
    import leftUser from './children/leftUser'
    import chatMain from './children/chatMain'
    import addFriends from './children/addFriends'
    import addFriendTip from './children/addFriendTip'

    export default {
        name: "index",
        components: {
            addFriends,
            leftUser,
            chatMain,
            addFriendTip
        },
        data(){
            return {
                chatWebsocket : {},
                addFriendTipData: {},
                addFriendTipVisible : false
            }
        },
        methods:{
            /*
            初始化websocket信息
            */
            initWebsocket(){
                let uid = window.localStorage.getItem('uid');
                this.chatWebsocket = new WebSocket($Constants.websocketUrl+'/'+uid);
                this.$store.commit('setChatWebsocket',this.chatWebsocket);
                this.chatWebsocket.onmessage = this.onmessage;
            },
            onmessage(event){
                this.dealBackMessage(event);
            },
            dealBackMessage(event){
                let backMessage = JSON.parse(event.data);
                console.log(backMessage);
                if( $Constants.MSG_TYPE_ADD_FRIEND === backMessage.msgType ){   // 添加好友请求
                    this.addFriendMessage(backMessage);
                } else if( $Constants.MSG_TYPE_SYSTEM === backMessage.msgType ){    // 系统消息
                    this.systemMessage(backMessage);
                } else if( $Constants.MSG_TYPE_AGREE_FRIEND == backMessage.msgType ){   // 好友通过消息提示
                    this.agreeAddFriend(backMessage);
                } else if( $Constants.MSG_TYPE_TEXT === backMessage.msgType ){
                    this.textMessage(backMessage);
                } else if( $Constants.MSG_TYPE_FRIEND_LOGIN === backMessage.msgType ){
                    this.friendLoginMessage(backMessage);
                }
            },
            // 添加好友请求消息
            addFriendMessage(backMessage){
                /**
                 * 出现一个好友请求弹框
                 */
                // this.$message.success(backMessage.content);
                this.addFriendTipData = backMessage;
                this.addFriendTipVisible = true;
            },
            // 系统消息
            systemMessage(backMessage){
                this.$message.success(backMessage.content);
            },
            // 关闭添加好友提示弹框
            closeAddFriendTip(){
                this.addFriendTipData = {};
                this.addFriendTipVisible = false;
            },
            // 同意添加好友信息
            agreeAddFriend(backMessage){
                this.$message.success(backMessage.content);
            },
            // 文本信息
            textMessage(backMessage){
                this.$root.Bus.$emit('textMessage',backMessage);
            },
            // 好友上线信息
            friendLoginMessage(backMessage){
                this.$root.Bus.$emit('friendLoginMessage',backMessage);
            }
        },
        mounted() {
            this.initWebsocket();
        }
    }
</script>

<style scoped>
    .indexClass {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction:row;
        justify-content:center;
        align-items:center;
    }
    .indexContent {
        width: 1000px;
        height: 800px;
        display: flex;
        flex-direction:row;
    }
</style>
